<template>
	<view class="search">
		<u-navbar class="navbar" title-color="#fff" back-icon-color="#ffffff"
			:background="background" :back-text-style="{color: '#fff'}">
			<!-- #ifdef MP-WEIXIN -->
				<search @select-goods="searchTitle" @select-clear="clearSearch" bgColor="rgba(0,0,0,0)" :disabled="false" :showAction="false"></search>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
				<search @select-goods="searchTitle" @select-clear="clearSearch" bgColor="rgba(0,0,0,0)" :disabled="false" :showAction="true"></search>
			<!-- #endif -->
		</u-navbar>
		<u-dropdown @open="open" active-color="#20cbd4" ref="uDropdown">
			<u-dropdown-item v-for="(item, index) in optionlist" :key="index"
			 v-model="item.value" :title="item.name" :options="item.options" @change="change"></u-dropdown-item>
		</u-dropdown>
		<empty v-if="isEmpty" :emptyImg="emptyImg" :emptyTxt="emptyTxt"></empty>
		<view  v-if="!isEmpty" class="hotGoods">
			<scroll-view scroll-y @scrolltolower="buttom" style="height: 1500rpx;">
			<u-waterfall v-model="goodsList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view class="goodswarp" v-for="(item, index) in leftList" :key="index" @click="jumpPage(item.goods_id)">
						<u-lazy-load threshold="200" :image="item.goods_image" :index="index"></u-lazy-load>
						<view class="sales" v-if="item.show_stock == 1">
							已售{{item.goods_sales}}件
						</view>
						<view class="goods_title">
							{{item.goods_name}}
						</view>
						<view class="cardFooter">
							<view class="price_txt" v-if="item.q_id == '1'">
								<view class="price"> 
									¥{{item.goods_min_price}}
								</view>
								<!-- <view class="u_price">
									¥{{item.goods_sku.line_price}}
								</view> -->
							</view>
							<view class="price_txt" v-if="item.q_id == '2'">
								<view class="price" v-if="item.goods_min_point>0">
									¥{{item.goods_min_price}}+{{item.goods_min_point}}券
								</view>
								<view class="price" v-else>
									¥{{item.goods_min_price}}
								</view>
							</view>
							<view class="price_txt" v-if="item.q_id == '3'">
<!--								<view class="price"> -->
<!--									¥{{item.goods_min_price}}-->
<!--								</view>-->
								<view class="price" v-if="item.goods_min_point>0">
									¥{{item.goods_min_price}}+{{item.goods_min_point}}券
								</view>
								<view class="price" v-else>
									¥{{item.goods_min_price}}
								</view>
								<view class="market_price">
									¥{{item.market_price}}
								</view>
							</view>
							<view class="price_txt" v-if="item.q_id == '4'">
								<view class="price" v-if="item.goods_min_point>0">
									¥{{item.goods_min_price}}+{{item.goods_min_point}}券
								</view>
								<view class="price" v-else>
									¥{{item.goods_min_price}}
								</view>
							</view>
						</view>
						
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="goodswarp" v-for="(item, index) in rightList" :key="index" @click="jumpPage(item.goods_id)">
						<u-lazy-load threshold="200" :image="item.goods_image" :index="index"></u-lazy-load>
						<view class="sales" v-if="item.show_stock == 1">
							已售{{item.goods_sales}}件
						</view>
						<view class="goods_title">
							{{item.goods_name}}
						</view>
						<view class="cardFooter">
							<view class="price_txt" v-if="item.q_id == '1'">
								<view class="price"> 
									¥{{item.goods_min_price}}
								</view>
								<!-- <view class="u_price">
									¥{{item.goods_sku.line_price}}
								</view> -->
							</view>
							<view class="price_txt" v-if="item.q_id == '2'">
								<view class="price" v-if="item.goods_min_point>0">
									¥{{item.goods_min_price}}+{{item.goods_min_point}}券
								</view>
								<view class="price" v-else>
									¥{{item.goods_min_price}}
								</view>
							</view>
							<view class="price_txt" v-if="item.q_id == '3'">
<!--								<view class="price"> -->
<!--									¥{{item.goods_min_price}}-->
<!--								</view>-->
								<view class="price" v-if="item.goods_min_point>0">
									¥{{item.goods_min_price}}+{{item.goods_min_point}}券
								</view>
								<view class="price" v-else>
									¥{{item.goods_min_price}}
								</view>
								<view class="market_price">
									¥{{item.goods_min_market_price}}
								</view>
							</view>
							<view class="price_txt" v-if="item.q_id == '4'">
								<view class="price" v-if="item.goods_min_point>0">
									¥{{item.goods_min_price}}+{{item.goods_min_point}}券
								</view>
								<view class="price" v-else>
									¥{{item.goods_min_price}}
								</view>
							</view>
						</view>
					</view>
				</template>
			</u-waterfall>
			</scroll-view>
		</view>
		<u-loadmore :status="status" color="#909399" :margin-bottom="25" v-if="!isEmpty"/>
		<!--返回顶部-->
		<!-- <u-back-top :custom-style="customStyle" :icon-style="iconStyle" :scroll-top="scrollTop"></u-back-top> -->
		<hoverMenu></hoverMenu>
	</view>
</template>

<script>
	import search from "@/components/public/search.vue";
	import empty from "@/components/public/empty.vue";
	import hoverMenu from "@/components/public/sa-hover-menu.vue";
	import {goodsList} from "@/common/api.js";
	export default {
		components: {
			search, 
			empty,
			hoverMenu
		},
		data() {
			return {
				background: {
					'background-color': '#20cbd4'
				},
				customStyle:{
					backgroundColor: "#a0edf1"
				},
				iconStyle:{
					color: "#0e595d",
					fontSize:"30rpx"
				},
				optionlist:[
					{ 
						name: '筛选专区',
						value:1,
						options: [
							{label:"主推区",value:1},
							{label:"优选区",value:2},
							{label:"福利区",value:3},
							// {label:"超享区",value:99}
						]
					},
					{ 
						name: '综合排序', 
						value:2, 
						options: [
							{label:"综合排序",value:4},
							{label:"销量排序",value:5},
						]
					},
					{ 
						name: '价格排序',
						value:3,
						options: [
							{label:"价格降序",value:6},
							{label:"价格升序",value:7},
							{label:"券降序",value:8},
							{label:"券升序",value:9}
						]
					}
				],
				isEmpty:false,
				emptyImg:getApp().globalData.imageUrl+"empty_goods.png",
				emptyTxt:"暂无该商品，请换个关键词试试吧～",
				goodsList: [],/*activityType:0=无；1=秒杀商品；2=拼团商品 */
				scrollTop:0,
				status: 'loadmore',
				pageSize: 10,
				pageStart: 1,
				total:0,
				title:"",
				index1:1,//第一个条件
				index2:0, //其他条件
				isShow:true
			}
		},
		onLoad(options) {
			this.optionlist[0].value=options.index;
			this.index1=options.index;
			this.optionlist[0].name=this.optionlist[0].options[options.index-1].label;
			this.goodsList=[];
			this.pageStart = 1;
			this.selectGoodsList();
		},
		onReady() {
			//this.$refs.uDropdown.highlight(0);
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			
		},
		methods: {
			buttom(){
				console.log(1111)
				if(this.total/(this.pageStart*this.pageSize)>1){
					this.pageStart++;
					this.selectGoodsList();
				}else{
					this.status = 'nomore';
				}
			},
			floatTouchClick(index){
				this.$uniApi.floatTouch(index);
			},
			jumpPage(id){
				uni.navigateTo({
				  url: '/goods/goodsDetail?goods_id='+id
				});
			},
			open(index){
				//this.$refs.uDropdown.highlight(index);
			},
			//条件查询
			change(val){
				if(val<4 || val==99){
					for(var i in this.optionlist[0].options){
						if(this.optionlist[0].options[i].value == val){
							this.optionlist[0].name=this.optionlist[0].options[i].label;
						}
					}
					if(val==99){
						this.index1=4;
						this.index2=99;
					}else{
						this.index1=val;
						this.index2=0;
					}

				}else{
					this.index2=val;
					if(val<6){
						for(var i in this.optionlist[1].options){
							if(this.optionlist[1].options[i].value == val){
								this.optionlist[1].name=this.optionlist[1].options[i].label;
							}
						}
					}else{
						for(var i in this.optionlist[2].options){
							if(this.optionlist[2].options[i].value == val){
								this.optionlist[2].name=this.optionlist[2].options[i].label;
							}
						}
					}
				}
				if(this.goodsList.length>0){
					this.$refs.uWaterfall.clear();
				}
				this.pageStart = 1;
				this.selectGoodsList();
			},
			//检索查询
			searchTitle(val){
				this.title = val;
				if(this.goodsList.length>0){
					this.$refs.uWaterfall.clear();
				}
				this.pageStart = 1;
				this.selectGoodsList();
			},
			//查询商品列表
			selectGoodsList(){
				var that = this;
				if(that.index2 == 0 ||that.index2 == 99){
					goodsList(that,{page:that.pageStart,limit:that.pageSize,q_id:that.index1,search:that.title});
				}else if(that.index2 == 4){
					goodsList(that,{page:that.pageStart,limit:that.pageSize,q_id:that.index1,search:that.title,sortType:"all"});
				}else if(that.index2 == 5){
					goodsList(that,{page:that.pageStart,limit:that.pageSize,q_id:that.index1,search:that.title,sortType:"sales"});
				}else if(that.index2 == 6){
					goodsList(that,{page:that.pageStart,limit:that.pageSize,q_id:that.index1,search:that.title,sortType:"price",sortPrice:"1"});
				}else if(that.index2 == 7){
					goodsList(that,{page:that.pageStart,limit:that.pageSize,q_id:that.index1,search:that.title,sortType:"price",sortPrice:"0"});
				}else if(that.index2 == 8){
					goodsList(that,{page:that.pageStart,limit:that.pageSize,q_id:that.index1,search:that.title,sortType:"points",sortPrice:"1"});
				}else if(that.index2 == 9){
					goodsList(that,{page:that.pageStart,limit:that.pageSize,q_id:that.index1,search:that.title,sortType:"points",sortPrice:"0"});
				}
			},
			clearSearch(){
				this.title = "";
				if(this.goodsList.length>0){
					this.$refs.uWaterfall.clear();
				}
				this.pageStart = 1;
				this.selectGoodsList();
			}
		}
	}
</script>

<style>
	page{
		font-family: PingFang SC;
		height: 100%;
		width: 100%;
		overflow-x: hidden;
		background: #f6f6f6;
	}
	.search{
		width: 100%;
	}
	.navbar{
		width: 100%;
	}
	.hotGoods{
		margin: 10rpx 10rpx 10rpx;
		padding: 20rpx 20rpx;
		border-radius: 10rpx;
	}
	.goodswarp {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		position: relative;
	}
	
	.goods_title {
		padding: 15rpx 15rpx 0;
		margin-top: 5px;
	}
	
	.price_txt{
		display: flex;
		flex-direction: row;
		align-items: flex-end;
	}
	.price {
		font-size: 30rpx;
		color: #FA3534;
		margin-top: 10rpx;
	}
	.market_price {
		font-size: 24rpx;
		line-height: 30rpx;
		color: #303133;
		margin-left: 16rpx;
		margin-bottom: 3rpx;
		text-decoration:line-through;
	}
	.u_price {
		font-size: 25rpx;
		color: #909399;
		margin-left: 10rpx;
		text-decoration: line-through;
	}
	.typeTag{
		position: absolute;
		z-index: 1;
	}
	.cardFooter{
		padding:0 15rpx 15rpx;
		margin-top: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
	}
	.sales{
		padding: 5rpx;
		text-align: center;
		font-size: 25rpx;
		background-color: #a0edf1;
		color: #0e595d;
	}
</style>
